<template>
  <!--基础存放容器-->
  <div class="swiper-container">
    <!-- 需要进行轮播的部分 -->
    <div class="swiper-wrapper">
      <!-- 每个节点 -->
      <div class="swiper-slide">
        <img
          data-src="https://pic.yupi.icu/5563/202311091857319.jpg"
          src="https://pic.yupi.icu/5563/202311091902481.gif"
          alt="书籍1"
          class="swiper-lazy"
        />
      </div>
      <div class="swiper-slide">
        <img
          data-src="https://pic.yupi.icu/5563/202311091857306.jpg"
          src="https://pic.yupi.icu/5563/202311091902481.gif"
          alt="书籍2"
          class="swiper-lazy"
        />
        <div class="swiper-lazy-preloader"></div>
      </div>
      <div class="swiper-slide">
        <img
          data-src="https://pic.yupi.icu/5563/202311091857330.jpg"
          src="https://pic.yupi.icu/5563/202311091902481.gif"
          alt="书籍3"
          class="swiper-lazy"
        />
        <div class="swiper-lazy-preloader"></div>
      </div>
      <div class="swiper-slide">
        <img
            data-src="https://my-web-management.oss-cn-hangzhou.aliyuncs.com/book4.jpg"
            src="https://pic.yupi.icu/5563/202311091902481.gif"
            alt="书籍4"
            class="swiper-lazy"
        />
        <div class="swiper-lazy-preloader"></div>
      </div>
      <div class="swiper-slide">
        <img
            data-src="https://my-web-management.oss-cn-hangzhou.aliyuncs.com/book5.jpg"
            src="https://pic.yupi.icu/5563/202311091902481.gif"
            alt="书籍5"
            class="swiper-lazy"
        />
        <div class="swiper-lazy-preloader"></div>
      </div>
      <div class="swiper-slide">
        <img
            data-src="https://my-web-management.oss-cn-hangzhou.aliyuncs.com/book6.jpg"
            src="https://pic.yupi.icu/5563/202311091902481.gif"
            alt="书籍6"
            class="swiper-lazy"
        />
        <div class="swiper-lazy-preloader"></div>
      </div>
    </div>

    <!--如果需要使用分页器-->
    <div class="swiper-pagination swiper-pagination-white"></div>

    <!-- 如果需要使用前进后退按钮 -->
    <div class="swiper-button-prev swiper-button-white"></div>
    <div class="swiper-button-next swiper-button-white"></div>
  </div>
</template>

<script>
import swiper from "swiper";

export default {
  name: "",
  data() {
    return {};
  },
  mounted() {
    this.initSwiper();
  },
  methods: {
    initSwiper() {
      new Swiper(".swiper-container", {
        //设置轮播的循环方式
        loop: true,

        //设置自动播放间隔时间
        autoplay: 2000,

        // 轮播效果,默认为平滑轮播
        effect: "slide",

        //分页器
        pagination: ".swiper-pagination",

        //前进后退按钮
        prevButton: ".swiper-button-prev",
        nextButton: ".swiper-button-next",

        // 用户中断轮播后续播
        autoplayDisableOnInteraction: false,
        //懒加载
        lazyLoading: true,
      });
    },
  },
};
</script>

<!--
<style scoped>
@import "../../../node_modules/swiper/dist/css/swiper.css";

.swiper-container {
  width: 1000px;
  height: 650px;
  margin-top: 40px;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>-->
<style scoped>
@import "../../../node_modules/swiper/dist/css/swiper.css";

.swiper-container {
  width: 100%;
  max-width: 1200px; /* 保证最大宽度 */
  height: 652px;
  margin: 40px auto;  /* 居中容器 */
  border-radius: 15px; /* 圆角效果 */
  overflow: hidden;  /* 防止超出圆角的部分 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  position: relative;
}

.swiper-wrapper {
  border-radius: 10px; /* 保证每个幻灯片有圆角 */
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;  /* 防止图片溢出 */
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;  /* 平滑过渡效果 */
}

.swiper-slide:hover img {
  transform: scale(1.05);  /* 放大效果 */
}

/* 分页器样式 */
.swiper-pagination {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.swiper-pagination-bullet {
  background-color: rgba(255, 255, 255, 0.6);
  width: 12px;
  height: 12px;
  margin: 0 5px;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.swiper-pagination-bullet-active {
  background-color: #ffffff;
}

/* 前进后退按钮样式 */
.swiper-button-next, .swiper-button-prev {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  padding: 12px;
  z-index: 10;
  transition: background-color 0.3s ease;
}

.swiper-button-next:hover, .swiper-button-prev:hover {
  background-color: rgba(0, 0, 0, 0.6); /* 悬浮效果 */
}

/* 屏幕小于1000px时，轮播图高度自动调整 */
@media (max-width: 1000px) {
  .swiper-container {
    height: 500px;  /* 小屏幕下减少高度 */
  }
}

/* 屏幕小于768px时，轮播图高度自动调整 */
@media (max-width: 768px) {
  .swiper-container {
    height: 400px;  /* 手机尺寸下减少高度 */
  }
}
</style>

